<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>双向数据绑定的页面渲染</title>
  </head>
  <body>
    <input type="text" v-model="content" />
    <h3 v-bind="content"></h3>
    <hr />
    <input type="text" v-model="title" />
    <input type="text" v-model="title" />
    <h3 v-bind="title">这里也会发生更新</h3>
  </body>
  <script>
    function View() {
      //设置代理拦截
      let proxy = new Proxy(
        {},
        {
          get(obj, property) {},
          set(obj, property, value) {
            document
              .querySelectorAll(`[v-model="${property}"]`)
              .forEach((item) => {
                item.value = value;
              });
            document
              .querySelectorAll(`[v-bind="${property}"]`)
              .forEach((item) => {
                item.innerHTML = value;
              });
          }
        }
      );
      //初始化绑定元素事件
      this.init = function() {
        const eles = document.querySelectorAll("[v-model]");
        eles.forEach((item) => {
          item.addEventListener("keyup", function() {
            proxy[this.getAttribute("v-model")] = this.value;
          });
        });
      };
    }
    let view = new View().init();
  </script>
</html>
